<script setup>
import { Delete, Download, Folder, MessageBox, Search, Upload } from '@element-plus/icons-vue';
import {del, get} from '../api/http'
import { ref, onMounted } from 'vue';
import { ElMessageBox } from 'element-plus';

const uploadUrl = window._apiUrl.webUrl+'file/upload'
const headers = {Authorization: localStorage.getItem('token')}
const fileList = ref([])
const percentage = ref(0)
const showProgress = ref(false)
const subCount = ref(0)
const keyword = ref('')
const selectedFile = ref(null)

const getFileList = () => {
    get('file',{keyword: keyword.value}).then(res=>{
        fileList.value = res.data
        let count = parseInt((window.innerWidth) / 190)
        subCount.value =  count - (fileList.value.length - count*(parseInt(fileList.value.length / count)))
    })
    
}

const download = (id) => {
    window.open(window._apiUrl.webUrl+'file/download/'+id)
}

const handleSuccess = () => {
    setTimeout(()=>{
        showProgress.value = false
        getFileList()
    },500)
}

const handleProcess = (event,uploadFile) => {
    showProgress.value = true
    percentage.value = parseInt(event.percent)
}

const checkFile = (uploadFile) => {
    if(parseInt(uploadFile.size/1024/1024)>10){
        ElMessageBox.alert('抱歉，由于是个人服务器，配置有限，因此，对于除管理员外的其他角色用户单词文件上传大小不能大于10MB，感谢理解','提示',{type:'warning'});
        return false;
    }
}

const chooseFile = (file) => {
    selectedFile.value = file
}

const downloadFile = () => {
    ElMessageBox.confirm('确认下载: '+selectedFile.fileName+' 文件吗？','提示',{type:'info', confirmButtonText:'确认下载',cancelButtonText:'取消下载'}).then(()=>{
        window.open(window._apiUrl.webUrl+'file/download/'+selectedFile.value.id)
    }).catch(()=>{
        ElMessage({type:'info',message:'已取消下载'})
    })
}

const deleteFile = () => {
    ElMessageBox.confirm('确认删除: '+selectedFile.fileName+' 文件吗？','提示',{type:'warning', confirmButtonText:'确认删除',cancelButtonText:'取消删除'}).then(()=>{
        del('file',[selectedFile.value.id]).then(res=>{
            ElMessage({type:res.status?'success':'error',message:res.msg})
            if(res.status){
                getFileList()
            }
        })
    }).catch(()=>{
        ElMessage({type:'info',message:'已取消删除'})
    })
}

onMounted(()=>{
    getFileList()
    window.addEventListener('resize',()=>{
        getFileList()
    })
})

</script>
<template>
    <main v-blog-title data-title="资源">
        <el-row>
            <el-col>
                <div class="toolBar">
                    <el-input v-model="keyword" @input="getFileList" placeholder="搜索文件" :suffix-icon="Search" style="width:300px"></el-input>
                    <el-upload :action="uploadUrl" :show-file-list="false" :headers="headers" :before-upload="checkFile" :on-progress="handleProcess" :on-success="handleSuccess">
                        <el-button :icon="Upload" style="width: 100px; margin: 0px 10px;" type="primary">上传</el-button>
                    </el-upload>
                    <el-button @click="downloadFile" v-if="selectedFile != null" :icon="Download" style="width: 100px;" type="primary">下载</el-button>
                    <el-button @click="deleteFile" v-if="selectedFile != null" :icon="Delete" style="width: 100px;" type="danger">删除</el-button>
                </div>
                <div class="right-menu">
                    <div class="fileBox">
                        <div class="file" v-if="showProgress">
                            <div class="process-pre">
                                <el-progress type="dashboard" :percentage="percentage">
                                    <template #default="{ percentage }">
                                        <span class="percentage-value">{{ percentage }}%</span>
                                        <span class="percentage-label">{{ percentage==100?'上传成功':'上传中' }}</span>
                                    </template>
                                </el-progress>
                            </div>
                        </div>
                        <div v-if="fileList.length == 0" style="width:100%; text-align: center;">
                            <el-empty description="暂无任何资源"></el-empty>
                        </div>
                        <div @click="chooseFile(item)" class="file" v-for="item in fileList" :key="item.id" :style="(selectedFile != null && selectedFile.id == item.id)?'background-color:rgba(116,134,189,0.6);':''">
                            <img v-if="item.fileName.indexOf('.txt') != -1" style="width:100px;" src="https://www.devcat.cn/res/icon/TXT.png"/>
                            <img v-else-if="item.fileName.indexOf('.pdf') != -1" style="width:100px;" src="https://www.devcat.cn/res/icon/DOC.png"/>
                            <img v-else-if="item.fileName.toLowerCase().indexOf('.jpg') != -1 || item.fileName.toLowerCase().indexOf('.jpeg') != -1 || item.fileName.toLowerCase().indexOf('.png') != -1" style="width:100px;" src="https://www.devcat.cn/res/icon/IMG.png"/>
                            <img v-else-if="item.fileName.indexOf('.xlsx') != -1 || item.fileName.indexOf('.xls') != -1" style="width:100px;" src="https://www.devcat.cn/res/icon/XLS.png"/>
                            <img v-else style="width:100px; margin-bottom:10px;" src="https://www.devcat.cn/res/icon/FILE.png"/>
                            <el-tooltip :content="item.fileName">
                                <div class="file-name">{{ item.fileName.substring(0,10) }}<span v-if="item.fileName.length > 10">...</span></div>
                            </el-tooltip>
                        </div>
                        <div style="width: 150px; height: 150px; margin: 10px; padding: 10px;" v-for="item in subCount" :key="item"></div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <!-- <div class="option">
            <el-upload :action="uploadUrl" :show-file-list="false" :headers="headers" :on-progress="handleProcess" :on-success="handleSuccess">
                <el-button :icon="Upload" style="width: 80px;" type="primary" round>上传</el-button>
            </el-upload>
        </div> -->
    </main>
</template>
<style scoped>
    .left-menu{
        height: calc(100vh - 100px);
        border-right: 1px solid #333;
    }
    .right-menu{
        height: calc(100vh - 111px);
        overflow-y: auto;
        background-color: #fff;
    }
    ul{
        margin: 0;
        padding: 0;
    }
    ul > li {
        list-style: none;
        padding: 10px;
        margin: 0;
        border-bottom: 1px solid #aaa;
        cursor: pointer;
        display: flex;
        align-items: center;
        height: 30px;
    }
    li:hover{
        background-color: #eee;
    }
    .toolBar{
        display: flex;
        /* justify-content: space-between; */
        align-items: center;
        height: 40px;
        border-bottom: 1px solid #aaa;
        padding: 5px 10px;
    }
    .fileBox{
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }
    .file{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 10px;
        padding: 10px;
        cursor: pointer;
        font-size: 14px;
        width: 150px;
        height: 150px;
        border-radius: 5px;
    }
    .file:hover{
        background-color: rgba(116,134,189,0.3);
    }
    .option{
        position: absolute;
        bottom: 0;
        right: 0;
        margin: 10px;
    }
    .file-name{
        font-size: 14px;
        width: 150px;
        text-align: center;
    }
    .process-pre{
        width:100px;
        height:100px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
</style>